<template>
  <view class="containerform">
    <up-navbar :title="title" placeholder @leftClick="leftClick" rightIcon="more-dot-fill"
      @rightClick="rightClick"></up-navbar>
    <!-- 表单 -->
    <view class="form-container">
      <view class="mian">
        <up-form labelPosition="top" ref="form">
          <up-form-item v-for="(config, index) in visibleFormItems" :key="index" :label="config.title" borderBottom
            :required="config.props.required">
            <!-- 动态渲染 -->
            <FormDesignRender :ApplyDetailList="ApplyDetailList" :ref="`sub-item_${config.id}`" v-model="config.value"
              :config="config" :label="config.title" @height-change="onFormHeightChange">
            </FormDesignRender>

            <orderAfterSales :ApplyDetailList="ApplyDetailList" :ref="`sub-item_${config.id}`" v-model="config.value"
              :config="config" v-if="form.formName == '订单售后' && sonID == '50'"
              @data-updated="handleComponentChange(config.id, $event)">
            </orderAfterSales>

            <orderCustomerRename :ApplyDetailList="ApplyDetailList" :ref="`sub-item_${config.id}`"
              v-model="config.value" :config="config" v-if="form.formName == '订单客户更名流程单' && sonID == '53'"
              @data-updated="handleComponentChange(config.id, $event)"></orderCustomerRename>

            <orderPriceAdjustment :ApplyDetailList="ApplyDetailList" :ref="`sub-item_${config.id}`"
              v-model="config.value" :config="config" v-if="form.formName == '订单调价流程' && sonID == '51'"
              @data-updated="handleComponentChange(config.id, $event)"></orderPriceAdjustment>

            <!-- <customersVisitFactory :ref="`sub-item_${config.id}`" v-model="config.value" :config="config"
							v-if="form.formName == '客户访厂流程单' && sonID == '58'"></customersVisitFactory> -->
          </up-form-item>
        </up-form>
      </view>
    </view>

    <!-- 流程图 -->
    <ProcessRender :processDataDetail="ApplyDetailList?.processData" ref="process" :process="form.process"
      :value="processData" v-if="processShow"></ProcessRender>

    <view class="action-bar">
      <view class="draft-btn" @click="cgdebouncedSubmit">
        <uni-icons type="compose" size="24"></uni-icons>
        <text>存草稿</text>
      </view>
      <up-button class="submit-btn" @click="modalShow = true" type="primary" text="提交"></up-button>
    </view>

    <up-modal :show="modalShow" showCancelButton width="300" content="确认提交审批吗？" @cancel="modalShow = false"
      @confirm="debouncedSubmit" ref="uModal" :asyncClose="true">
    </up-modal>

    <!-- 更多选项 -->
    <up-popup mode="bottom" :show="memberShow" @close="memberShow = false" :round="'10'">
      <view class="morePopupContent" :style="memberShowHeight">
        <view class="morePopupheader">
          <view class="morePopuptitle" @click="viewDraftbox">草稿箱 ({{ count }})</view>
        </view>

        <view class="more-popup__cancel">
          <view class="more-popup__cancel-btn" @click="memberShow = false">
            取消
          </view>
        </view>

      </view>
    </up-popup>


    <view style="height: 300rpx;"></view>
    <!-- 消息提示	 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import apply from "@/apis/cloud/apply.js";
import process from "@/apis/cloud/process.js";
import FormDesignRender from "./FormDesignRender.vue";
import ProcessRender from "./process/ProcessRender.vue";
import orderAfterSales from "./SupplyChain/orderAfterSales.vue";
import orderCustomerRename from "./SupplyChain/orderCustomerRename.vue";
import orderPriceAdjustment from "./SupplyChain/orderPriceAdjustment.vue";
// import customersVisitFactory from "./SupplyChain/customersVisitFactory.vue";
export default {
  components: {
    ProcessRender,
    FormDesignRender,
    orderAfterSales,
    orderCustomerRename,
    orderPriceAdjustment,
    // customersVisitFactory
  },
  data () {
    return {
      // 添加一个对象来存储所有子组件数据
      componentsData: {},
      processShow: false,
      modalShow: false,
      forms: {},
      processData: {},
      form: {
        formId: '',
        formName: "",
        logo: {},
        formItems: [],
        process: {},
        remark: ""
      },
      formData: {},
      sonID: null,
      requiredList: {},
      title: '发起审批',
      form_id: '', // 详情表单id
      ApplyDetailList: [], // 详情表单数据
      memberShow: false, // 更多选项弹窗
      memberShowHeight: {}, // 更多选项弹窗高度
      count: 0, // 草稿箱数量
      DraftList: [],// 草稿箱数据
      draftId: '', // 草稿箱id
      submitTimer: null, // 用于存储防抖定时器
      cgsubmitTimer: null, // 用于草稿箱存储防抖定时器
    }
  },
  async onLoad (option) {
    if (option?.form_id) {
      this.form_id = option?.form_id
      await this.getApplygetApplyDetail()
    }

    if (option?.draftId) {
      this.draftId = option?.draftId
      await this.getDraftDetail()
    }

    this.sonID = option.id;
    this.title = option.formName;

    await this.getFormProces(option.id);
    // #ifdef H5

    this.memberShowHeight = {
      height: `130px`,
    };
    // #endif

    // #ifdef APP-PLUS
    this.memberShowHeight = {
      height: `130px`,
    };
    // #endif
  },
  created () {
    uni.removeStorageSync("sp");
  },
  mounted () {

  },
  computed: {
    visibleFormItems () {
      return this.form.formItems.filter(item => {
        const pos = item?.props?.displayPosition;
        return pos === 1 || pos === undefined;
      });
    }
  },
  onUnload () {
    uni.$emit('onUnloadupdateMileagePhoto')
  },
  methods: {
    async rightClick () {
      await this.getDraftLists()
      this.memberShow = true
    },
    viewDraftbox () {
      uni.navigateTo({
        url: `/pages/apply/components/drafts?id=${this.sonID}`
      })
      this.memberShow = false
    },

    // 获取草稿箱数据
    async getDraftLists () {
      await apply.ApplygetDraftLists({
        formId: this.sonID
      }).then((res) => {
        if (res.status == 1) {

          this.count = res.count || res.data.length
          this.DraftList = res.data
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.msg || "获取失败，请重试",
            icon: "error",
          });
        }
      }).catch((err) => {
        uni.showToast({
          title: res.msg || "获取失败，请重试",
          icon: "error",
        });
      })
    },
    cgdebouncedSubmit () {
      if (this.cgsubmitTimer) {
        uni.$u.toast('请勿频繁提交哦！');
        clearTimeout(this.cgsubmitTimer); // 清除之前的定时器
      }
      // 显示加载框
      uni.showLoading({
        title: '正在保存中'
      });
      // 重新开启定时器，只有停止点击 800ms 后才会触发
      this.cgsubmitTimer = setTimeout(() => {
        this.saveDraft();
        this.cgsubmitTimer = null;
      }, 800);
    },
    async saveDraft () {
      let status = true


      // 通用字段
      this.form.formItems.forEach(item => {
        this.formData[item.id] = item.value;
        this.formData[item.id] = uni.getStorageSync(item.id);
        if (item?.props?.items) {
          item?.props?.items.forEach(items => {
            this.formData[items.id] = items.value;
            this.formData[items.id] = uni.getStorageSync(items.id);
          })
        }
      })

      // 特殊组件数据
      Object.keys(this.componentsData).forEach(componentId => {
        this.formData[componentId] = this.componentsData[componentId];
      });

      this.processData = uni.getStorageSync("sp");
      // return
      let data = {
        draftId: this.draftId,
        form: JSON.stringify(this.form),
        formData: JSON.stringify(this.formData, (key, value) => {
          return value === undefined || value === null || value === '' ? '' : value
        }),
        processData: JSON.stringify(this.processData),
      }

      this.requiredList = JSON.parse(data.formData)
      if (!this.validateRequiredFields()) {
        // 隐藏加载框
        uni.hideLoading();
        return;
      }

      this.$refs.process.validate(valid => {
        if (!valid) {
          // 隐藏加载框
          uni.hideLoading();
          uni.$u.toast('请完善流程');
          status = false
        }
      })

      if (!status) {
        uni.hideLoading();
        return;
      }

      if (this.type && this.ids) {
        data.type = this.type
        data.ids = this.ids
      }

      await apply.ApplyaddDraftForm(data).then((res) => {
        if (res.status == 1) {
          this.draftId = res.id
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "success",
          });

        } else {
          uni.hideLoading();
          uni.showToast({
            title: "保存失败，请重试",
            icon: "error",
          });
        }

      })
    },
    // 获取草稿箱详情
    async getDraftDetail () {
      uni.showLoading({
        title: '加载中...'
      });
      try {
        await apply.ApplygetDraftDetail({
          id: this.draftId
        }).then((res) => {
          if (res.status == 1) {
            this.ApplyDetailList = res.data
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.msg || "获取失败，请重试",
              icon: "error",
            });
          }
        }).catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err || "获取失败，请重试",
            icon: "error",
          });
        })
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: err || "获取失败，请重试",
          icon: "error",
        });
      }
    },
    //  再次提交详情
    async getApplygetApplyDetail () {
      await apply.ApplygetApplyDetail({
        id: this.form_id
      }).then((res) => {
        if (res.status == 1) {
          this.ApplyDetailList = res.data
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.msg || "获取失败，请重试",
            icon: "error",
          });
        }
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: err || "获取失败，请重试",
          icon: "error",
        });
      })
    },
    // 处理表单影响FileUpload组件的位置
    onFormHeightChange (status) {
      this.form.formItems.forEach(item => {
        const ref = this.$refs[`sub-item_${item.id}`];
        const component = Array.isArray(ref) ? ref[0] : ref;
        if (!component) return;

        if (item.name === 'FileUpload' && component.$refs?.form) {
          if (status && typeof component.$refs.form.updateUploadShow === 'function') {
            component.$refs.form.updateUploadShow();
          } else if (!status && typeof component.$refs.form.updateUploadHide === 'function') {
            component.$refs.form.updateUploadHide();
          }
        }
      });
      // this.form.formItems.forEach(item => {
      //   const ref = this.$refs[`sub-item_${item.id}`];
      //   if (ref && ref[0]) {
      //     const component = ref[0];
      //     // 检查是否是FileUpload组件
      //     if (item.name === 'FileUpload' && component.$refs.form) {
      //       if (status) {
      //         component.$refs?.form?.updateUploadShow();
      //       } else {
      //         component.$refs?.form?.updateUploadHide();
      //       }
      //     }
      //   }
      // });
    },
    // 处理子组件数据变更
    handleComponentChange (componentId, data) {
      // 使用组件ID作为键存储数据
      this.$set(this.componentsData, componentId, data);
      console.log(this.componentsData);
    },
    leftClick () {
      uni.navigateBack();
      // uni.redirectTo({
      // 	url: '/pages/apply/home/index'
      // })
    },
    // 获取表单数据
    async getFormProces (id) {
      uni.showLoading({
        title: '加载中...'
      });
      const msg = await apply.getFormDetail({
        id: id
      });
      // 隐藏加载框
      uni.hideLoading();
      let form = msg.data;
      uni.setStorageSync('formData', form);
      form.logo = JSON.parse(form.logo)
      form.settings = JSON.parse(form.settings)
      form.formItems = JSON.parse(form.formItems)
      form.process = JSON.parse(form.process)

      this.form = form;
      this.processShow = true
      this.loading = false
      form.formItems.forEach((item) => {
        uni.removeStorageSync(`${item.id}`);
      })


      if (this.form_id || this.draftId) return this.title = `${msg.data.formName}审批`
    },

    debouncedSubmit () {
      if (this.submitTimer) {
        uni.$u.toast('请勿频繁提交哦！');
        clearTimeout(this.submitTimer);
      }

      // 显示加载框
      uni.showLoading({
        title: '正在提交中'
      });
      this.modalShow = false;
      this.submitTimer = setTimeout(() => {
        this.submit();
        this.submitTimer = null;
      }, 800);
    },
    // 表单提交
    async submit () {
      let status = true
      // 通用字段
      this.form.formItems.forEach(item => {
        this.formData[item.id] = item.value;
        this.formData[item.id] = uni.getStorageSync(item.id);
        if (item?.props?.items) {
          item?.props?.items.forEach(items => {
            this.formData[items.id] = items.value;
            this.formData[items.id] = uni.getStorageSync(items.id);
          })
        }
      })

      // 特殊组件数据
      Object.keys(this.componentsData).forEach(componentId => {
        this.formData[componentId] = this.componentsData[componentId];
      });

      this.processData = uni.getStorageSync("sp");
      // return
      let data = {
        draftId: this.draftId,
        form: JSON.stringify(this.form),
        formData: JSON.stringify(this.formData, (key, value) => {
          return value === undefined || value === null || value === '' ? '' : value
        }),
        processData: JSON.stringify(this.processData),
      }

      this.requiredList = JSON.parse(data.formData)
      if (!this.validateRequiredFields()) {
        // 隐藏加载框
        uni.hideLoading();
        return;
      }

      this.$refs.process.validate(valid => {
        if (!valid) {
          // 隐藏加载框
          uni.hideLoading();
          uni.$u.toast('请完善流程');
          status = false
        }
      })

      if (!status) {
        uni.hideLoading();
        return;
      }

      if (this.type && this.ids) {
        data.type = this.type
        data.ids = this.ids
      }

      process.addForm(data).then(rsp => {
        if (rsp.status > 0) {
          uni.hideLoading();
          uni.showToast({
            title: '提交成功',
            icon: 'success',
          });
          uni.redirectTo({
            url: "/pages/apply/oaList/index?title=已发起&active=3"
          })
        } else {
          uni.hideLoading();
          uni.showToast({
            title: rsp.msg || '提交失败',
            icon: 'error',
          });
        }
      }).catch(err => {
        // 隐藏加载框
        uni.hideLoading();
        setTimeout(() => {
          uni.showToast({
            title: '提交失败',
            icon: 'error',
          });
        }, 50);
      })
    },
    // 校验表单必填项
    validateRequiredFields () {
      for (let item of this.form.formItems) {
        const pos = item?.props?.displayPosition;
        if (pos !== 1 && pos !== undefined) continue; // 不是显示项，跳过校验

        if (item.props.required) {
          const fieldValue = this.requiredList[item.id];

          // 判断字段是否有值
          if (!this.isValidValue(fieldValue)) {
            console.warn(`字段 ${item.id} 是必填项，但未填写值`);
            uni.$u.toast(`请完善必填项：${item.title}`);
            return false; // 立即返回 false，终止后续校验
          }
        }

        // 如果有子项（如 props.items），也需要检查
        if (item.props?.items) {
          for (let subItem of item.props.items) {
            const subPos = subItem?.props?.displayPosition;
            if (subPos !== 1 && subPos !== undefined) continue; // 子项隐藏的也跳过
            if (subItem.props?.required) {
              const subFieldValue = this.requiredList[subItem.id];
              if (!this.isValidValue(subFieldValue)) {
                console.warn(`子字段 ${subItem.id} 是必填项，但未填写值`);
                uni.$u.toast(`请完善必填项：${subItem.title}`);
                return false; // 立即返回 false，终止后续校验
              }
            }
          }
        }
      }


      if (this.form.formName == '订单售后' && this.sonID == '50') {
        const formData = uni.getStorageSync('orderAfterSalesData');
        console.log('formData', formData)
        if (!formData) {
          uni.$u.toast('请填写售后表单数据');
          return false;
        }

        // 2.1 校验售后日期
        if (!formData?.afterSaleDate) {
          console.log('请填写售后日期')
          uni.$u.toast('请填写售后日期');
          return false;
        }

        // 2.2 校验客户信息（orderList）
        const orderList = formData?.orderList || [];
        if (orderList.length === 0) {
          uni.$u.toast('请添加客户信息');
          return false;
        }

        for (let order of orderList) {
          const requiredOrderFields = ['arrivalDate', 'customerName', 'department', 'orderNum', 'pickDate', 'salesPerson'];
          for (let field of requiredOrderFields) {
            if (!this.isValidValue(order[field])) {
              uni.$u.toast('客户信息不完整，请检查');
              return false;
            }
          }
        }

        // 2.3 校验产品信息（productList）
        const productList = formData?.productList || [];
        if (productList.length === 0) {
          uni.$u.toast('请添加产品信息');
          return false;
        }

        for (let product of productList) {
          // 固定必填字段
          const fixedRequiredFields = ['desc', 'grossWeight', 'parkName', 'piece', 'productName', 'saleType', 'weight'];
          for (let field of fixedRequiredFields) {
            // 使用更严格的校验方法替代简单的if(!product[field])
            if (!this.isFieldValid(product[field])) {
              console.error('缺失的字段:', field, '当前值:', product[field]);
              uni.$u.toast('产品信息不完整，请检查');
              return false;
            }
          }

          // 根据销售类型动态校验
          if (product.saleType === '折价') {
            const discountRequiredFields = ['actualPayableAmount', 'compensationQuantity', 'discountPrice'];
            for (let field of discountRequiredFields) {
              if (!this.isFieldValid(product[field])) {
                uni.$u.toast('折价产品信息不完整，请检查');
                return false;
              }
            }
          }
        }
      }

      if (this.form.formName == '订单客户更名流程单' && this.sonID == '53') {
        const formData = uni.getStorageSync('orderAfterSalesData');

        if (!formData) {
          console.log('formData', 11111111111111)
          uni.$u.toast('请完善订单客户更名流程单');
          return false;
        }

        // 2.1 校验售后日期
        if (!formData?.date) {
          uni.$u.toast('请填写日期');
          return false;
        }

        if (!formData?.reason) {
          uni.$u.toast('请填写客户调整原因说明');
          return false;
        }

        // 2.2 校验客户信息（orderList）
        const customerList = formData?.customerList || [];
        if (customerList.length === 0) {
          uni.$u.toast('请添加要更正的客户信息');
          return false;
        }

        for (let order of customerList) {
          const requiredOrderFields = ['accountPeriod', 'address', 'area', 'customerAddress', 'customerForm', 'customerName', 'customerPay', 'customerPhone', 'customerTake', 'department', 'isInvoicing', 'orderNum', 'salesPerson', 'textArea', 'textCity', 'textProvince'];
          for (let field of requiredOrderFields) {
            if (!this.isValidValue(order[field])) {
              uni.$u.toast('要更正的客户信息不完整，请检查');
              return false;
            }
          }
        }

        const orderCustomer = formData?.orderCustomer || [];
        if (orderCustomer.length === 0) {
          uni.$u.toast('请添加订单客户信息');
          return false;
        }

        for (let order of orderCustomer) {
          const requiredOrderFields = ['accountPeriod', 'address', 'area', 'customerAddress', 'customerForm', 'customerName', 'customerPay', 'customerPhone', 'customerTake', 'department', 'isInvoicing', 'orderNum', 'salesPerson', 'textArea', 'textCity', 'textProvince'];
          for (let field of requiredOrderFields) {
            if (!this.isValidValue(order[field])) {
              uni.$u.toast('订单客户信息不完整，请检查');
              return false;
            }
          }
        }

      }

      if (this.form.formName == '订单调价流程' && this.sonID == '51') {
        const formData = uni.getStorageSync('orderAfterSalesData');
        console.log('formData', formData)
        if (!formData) {
          uni.$u.toast('请填写订单调价流程数据');
          return false;
        }

        // 2.1 校验售后日期
        if (!formData?.date) {
          uni.$u.toast('请填写日期');
          return false;
        }

        if (!formData?.department) {
          uni.$u.toast('请填写所属部门');
          return false;
        }

        if (!formData?.salesPerson) {
          uni.$u.toast('请填写销售人员');
          return false;
        }

        if (!formData?.reason) {
          uni.$u.toast('请填写调价原因');
          return false;
        }

        // 2.2 校验客户信息（orderList）
        const products = formData?.products || [];
        if (products.length === 0) {
          uni.$u.toast('请添加客户信息');
          return false;
        }


        for (let order of products) {
          const requiredOrderFields = ['adjustDesc', 'adjustPrice', 'adjustPriceTotal', 'customerName', 'desc', 'minimum', 'orderNum', 'piece', 'priceTotal', 'productName', 'saleType', 'skuName', 'weight', 'weightTotal'];
          for (let field of requiredOrderFields) {
            if (!this.isValidValue(order[field])) {
              uni.$u.toast('客户信息不完整，请检查');
              return false;
            }
          }
        }



      }

      uni.hideLoading();

      return true; // 所有字段都通过校验
    },
    // 新增方法：更完善的字段校验
    isFieldValid (value) {
      // 处理undefined和null
      if (value === undefined || value === null) {
        return false;
      }

      // 处理字符串 - 非空字符串为有效
      if (typeof value === 'string') {
        return value.trim() !== '';
      }

      // 处理数字 - 0也是有效值
      if (typeof value === 'number') {
        return true;
      }

      // 处理布尔值 - false也是有效值
      if (typeof value === 'boolean') {
        return true;
      }

      // 处理数组 - 非空数组为有效
      if (Array.isArray(value)) {
        return value.length > 0;
      }

      // 处理对象 - 非空对象为有效
      if (typeof value === 'object') {
        return Object.keys(value).length > 0;
      }

      // 其他类型视为无效
      return false;
    },
    // 辅助方法：判断值是否有效
    isValidValue (value) {
      if (Array.isArray(value)) {
        // 数组：非空且至少有一个元素
        return value.length > 0 && value.some(item => !!item);
      } else if (typeof value === 'object' && value !== null) {
        // 对象：非空且至少有一个有效属性
        return Object.keys(value).length > 0;
      } else {
        // 普通值：非空字符串、非 null、非 undefined
        return !!value;
      }
    }


  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
  overflow-x: scroll;
}

.containerform {
  background-color: #f3f4f5;
}

.form-container {
  background-color: #ffffff;
  overflow: hidden;
}

.form-header {
  padding: 10rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10rpx;
}

.form-description {
  font-size: 28rpx;
  color: #999999;
}

.submit {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 90vw;
}


.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 100;

  .draft-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    color: #666;
    font-size: 24rpx;

    &:active {
      opacity: 0.7;
    }
  }

  .submit-btn {
    flex: 1;
    // margin-left: 30rpx;
    border-radius: 50rpx !important;
  }
}

.mian {
  padding: 0rpx 25rpx 25rpx 25rpx;
}

::v-deep .u-form-item__body__left {
  width: 90% !important;
}

::v-deep .u-divider {
  margin: 20rpx 0rpx !important;
}

.input {
  border: 1rpx solid #dadbde;
  display: block;
  width: 88vw;
  // pointer-events: none;
  background-color: white !important;
}



.morePopupContent {
  background-color: #f2f2f6;
  box-sizing: border-box;

  .morePopupheader {
    text-align: center;

    .morePopuptitle {
      background-color: #ffffff;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 1px solid #ffffff;
    }
  }

  .more-popup__cancel {
    height: 30px;
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding: 24rpx 0;
    text-align: center;
    color: #666;
    font-size: 32rpx;
    margin: 20rpx 0rpx 0 0;
    z-index: 10;
  }

  .more-popup__cancel-btn {
    position: absolute;
    top: -10px;
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    text-align: center;
    color: #666;
    font-size: 1rem;
    margin: 0.625rem 0 0 0;
    z-index: 10;
    width: 100%;
  }

  .more-popup__cancel-btn:active {
    background-color: #e5e5e5;
  }

}
</style>
